<template>
    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
            <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.articleClassifyObj.name}}</view>
            <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left"  @click="goArticleClassify(coreshopData.parameters.articleClassifyObj.id)"></u-icon>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <view class="coreshop-bg-main coreshop-text-black">
            <view class='coreshop-index-article coreshop-cell-group coreshop-margin-bottom-10  coreshop-margin-top-10  coreshop-bg-white' v-if="coreshopData.parameters.list && count">
                <view class='coreshop-cell-item' v-for="(item, index) in coreshopData.parameters.list" :key="index" @click="articleDetail(item.id)">
                    <view class="coreshop-cell-item-bd">
                        <view class="article-title">
                            {{ item.title }}
                        </view>
                        <view class="article-des u-line-2">
                            {{ item.brief }}
                        </view>
                    </view>
                    <view class="cell-title-img">
                        <image :src="item.coverImage" mode="aspectFill" class="coverImage"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopArticleclassify",
        props: {
            coreshopData: {
                // type: Array,
                required: true,
            }
        },
        computed: {
            count() {
                if (!this.coreshopData.parameters.list) {
                    return false;
                }
                return (this.coreshopData.parameters.list.length > 0)
            }
        },
        methods: {
            // 查看文章详情
            articleDetail(articleId) {
                this.$u.route('/pages/article/details/details?id=' + articleId + '&idType=1')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coreshop-index-article { border-radius: 8px; background: #FFFFFF !important; color: #333333 !important; overflow: hidden;
        .coreshop-cell-item { padding: 8px 0px 8px 0; float: left; width: 100%; border-bottom: 1px solid #f3f3f3;
            .coreshop-cell-item-bd { float: left; display: flex; flex-direction: column;
                .article-title { font-size: 14px; color: #333; width: 100%; overflow: hidden; float: left; margin-bottom: 5px; }
                .article-des { font-size: 12px; color: #999; overflow: hidden; float: left; line-height: 20px; }
            }
            .cell-title-img { width: 80px; height: 80px; float: right;
                .coverImage { width: 80px; height: 80px; border-radius: 2px; }
            }
        }
    }
</style>
